<template>
    <view class="bg-content">
        <div class="table table-bordered" style="text-align: center; background: white;">
            <div class="tr">
                <div class="td">
                    <div style="font-size: 20px; color: red; font-weight: bold;">
                        {{globalVariable.userInfo.tbCommunity.brokerageRate}}
                    </div>
                    <div>商城平台抽取提成比例</div>
                </div>
                <div class="td">
                    <div style="font-size: 20px; color: red; font-weight: bold;">
                        {{globalVariable.userInfo.tbCommunityAdmin.brokerageRate}}
                    </div>
                    <div style="text-decoration: underline;"
                         @click="setCommunityAdminBrokerageRate()">
                        商城管理员抽取提成比例
                    </div>
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    <div style="font-size: 20px; color: red; font-weight: bold;">
                        {{globalVariable.userInfo.tbCommunity.expandEarningsRate}}
                    </div>
                    <div style="text-decoration: underline;"
                         @click="setFans1BrokerageRate()">
                        商城推广收益：一级粉丝抽取提成比例
                    </div>
                </div>
                <div class="td">
                    <div style="font-size: 20px; color: red; font-weight: bold;">
                        {{globalVariable.userInfo.tbCommunity.thirdEarningsRate}}
                    </div>
                    <div style="text-decoration: underline;"
                         @click="setFans2BrokerageRate()">
                        商城推广收益：二级粉丝抽取提成比例
                    </div>
                </div>
            </div>
        </div>

        <u-sticky>
            <div style="border-bottom: 1rpx solid #eeeeee; height: 32px; background-color: #FFFFFF;">
                <u-search placeholder="店铺编码/店铺名称" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>
            </div>
        </u-sticky>

        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="width: 750px; text-align: center; background: white;">
                <div class="tr">
                    <div class="td" style="width: 150px;">用户账号</div>
                    <div class="td" style="width: 150px;">店铺编码</div>
                    <div class="td" style="width: 200px;">店铺名称</div>
                    <div class="td" style="width: 100px;">抽取提成比例</div>
                    <div class="td" style="width: 150px;">操作</div>
                </div>
                <div class="tr" v-for="(item, index)  in tbStoreList" :key="item.id">
                    <div class="td" style="width: 150px;">{{'item.sysUser.username' |toValue(item)}}</div>
                    <div class="td" style="width: 150px;">{{item.code}}</div>
                    <div class="td" style="width: 200px;">{{item.name}}</div>
                    <div class="td" style="width: 100px;">{{item.brokerageRate}}</div>

                    <div class="td text-center" style="width: 150px;">
                        <label style="margin-right: 15px; text-decoration: underline;"
                               @click="setStoreBrokerageRate(item)">
                            设置抽取提成比例
                        </label>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <u-modal ref="modalRef" v-model="isShow" :async-close="true" width="90%" :show-cancel-button="true" @cancel="isShow = false" @confirm="submit()">
            <view class="slot-content">
                <div style="padding: 15px;">
                    <u-field label-width="250"
                             v-model="validateForm.value.brokerageRate"
                             label="抽取提成比例"
                             placeholder="请输入抽取提成比例"
                             required
                    >
                    </u-field>
                </div>
            </view>
        </u-modal>

    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbStoreService} from "@/dev/services/tb-store.service";
    import {TbCommunityAdminService} from "@/dev/services/tb-community-admin.service";
    import {LocalStorageUtil} from "@/dev/core/utils/local-storage.util";
    import {TbCommunityService} from "@/dev/services/tb-community.service";

    export default {
        data() {
            return {
                searchKeyword: '',
                tbStoreList: [],
                isShow: false,
                validateForm: {
                    value: {
                        id: null,
                        brokerageRate: 0,
                        brokerageRateType: 0
                    },
                    rules: {
                        id: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']},
                        ],
                        brokerageRate: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^0(.[0-9]{1,3})?$/, message: '请输入大于或等于0且小于1，最多有三位小数的抽取提成比例!', trigger: ['change', 'blur']},
                        ],
                    }
                }
            }
        },
        onShow() {
            const _self = this;
            _self.doRefresh(this.tbStoreList);
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite()
            }
        },
        methods: {
            onSearch() {
                const _self = this;
                this.searchKeyword = CommonUtil.trim(this.searchKeyword)
                _self.doRefresh(_self.tbStoreList)
            },
            /**
             * 设置商城管理员抽取提成比例
             */
            setCommunityAdminBrokerageRate() {
                const _self = this;
                _self.validateForm.value.id = _self.globalVariable.userInfo.tbCommunityAdmin.id;
                _self.validateForm.value.brokerageRate = _self.globalVariable.userInfo.tbCommunityAdmin.brokerageRate;
                _self.validateForm.value.brokerageRateType = 0;
                _self.isShow = true;
            },
            /**
             * 设置商城推广收益：一级粉丝抽取提成比例
             */
            setFans1BrokerageRate() {
                const _self = this;
                _self.validateForm.value.id = _self.globalVariable.userInfo.tbCommunity.id;
                _self.validateForm.value.brokerageRate = _self.globalVariable.userInfo.tbCommunity.expandEarningsRate;
                _self.validateForm.value.brokerageRateType = 1;
                _self.isShow = true;
            },
            /**
             * 设置商城推广收益：二级粉丝抽取提成比例
             */
            setFans2BrokerageRate() {
                const _self = this;
                _self.validateForm.value.id = _self.globalVariable.userInfo.tbCommunityAdmin.id;
                _self.validateForm.value.brokerageRate = _self.globalVariable.userInfo.tbCommunity.thirdEarningsRate;
                _self.validateForm.value.brokerageRateType = 2;
                _self.isShow = true;
            },
            /**
             * 设置店铺抽取提成比例
             */
            setStoreBrokerageRate(item) {
                const _self = this;
                _self.validateForm.value.id = item.id;
                _self.validateForm.value.brokerageRate = item.brokerageRate;
                _self.validateForm.value.brokerageRateType = 3;
                _self.isShow = true;
            },
            submit() {
                const _self = this;
                console.log(_self.validateForm.value.brokerageRate);

                let reg = /^0(.[0-9]{1,3})?$/;
                if (!reg.test(_self.validateForm.value.brokerageRate)) {
                    CommonUtil.toast("请输入大于或等于0且小于1，最多有三位小数的抽取提成比例！", 3000);
                    _self.$refs.modalRef.clearLoading();
                    return;
                }

                _self.validateForm.value.brokerageRate = Number(_self.validateForm.value.brokerageRate);

                // 设置商城管理员抽取提成比例
                if (_self.validateForm.value.brokerageRateType === 0) {
                    new TbCommunityAdminService().updateTbCommunityAdmin(_self.validateForm.value).then(result => {
                        _self.isShow = false;
                        _self.globalVariable.userInfo.tbCommunityAdmin.brokerageRate = _self.validateForm.value.brokerageRate;
                        _self.globalVariable.userInfo.tbCommunityUserList.forEach(item => {
                            if (item.tbCommunityAdmin && item.tbCommunityAdmin.id === result.id) {
                                Object.assign(item.tbCommunityAdmin, CommonUtil.deleteNullAttrInObject(result));
                            }
                        });
                        LocalStorageUtil.setItem("userInfo", _self.globalVariable.userInfo);
                        CommonUtil.alert("设置成功");
                        _self.$forceUpdate();
                    });
                } else if (_self.validateForm.value.brokerageRateType === 1) {  // 设置商城推广收益：一级粉丝抽取提成比例
                    new TbCommunityService().updateTbCommunity({
                        id: _self.validateForm.value.id,
                        expandEarningsRate: _self.validateForm.value.brokerageRate
                    }).then(result => {
                        _self.isShow = false;
                        _self.globalVariable.userInfo.tbCommunity.expandEarningsRate = _self.validateForm.value.brokerageRate;
                        _self.globalVariable.userInfo.tbCommunityUserList.forEach(item => {
                            if (item.tbCommunity && item.tbCommunity.id === result.id) {
                                Object.assign(item.tbCommunity, CommonUtil.deleteNullAttrInObject(result));
                            }
                        });
                        LocalStorageUtil.setItem("userInfo", _self.globalVariable.userInfo);
                        CommonUtil.alert("设置成功");
                        _self.$forceUpdate();
                    });
                } else if (_self.validateForm.value.brokerageRateType === 2) {  // 设置商城推广收益：二级粉丝抽取提成比例
                    new TbCommunityService().updateTbCommunity({
                        id: _self.validateForm.value.id,
                        thirdEarningsRate: _self.validateForm.value.brokerageRate
                    }).then(result => {
                        _self.isShow = false;
                        _self.globalVariable.userInfo.tbCommunity.thirdEarningsRate = _self.validateForm.value.brokerageRate;
                        _self.globalVariable.userInfo.tbCommunityUserList.forEach(item => {
                            if (item.tbCommunity && item.tbCommunity.id === result.id) {
                                Object.assign(item.tbCommunity, CommonUtil.deleteNullAttrInObject(result));
                            }
                        });
                        LocalStorageUtil.setItem("userInfo", _self.globalVariable.userInfo);
                        CommonUtil.alert("设置成功");
                        _self.$forceUpdate();
                    });
                } else if (_self.validateForm.value.brokerageRateType === 3) {  // 设置店铺抽取提成比例
                    new TbStoreService().updateTbStore(_self.validateForm.value).then(result => {
                        _self.isShow = false;
                        _self.tbStoreList.forEach(item => {
                            if (item.id === _self.validateForm.value.id) {
                                item.brokerageRate = _self.validateForm.value.brokerageRate;
                            }
                        });
                        CommonUtil.alert("设置成功");
                        _self.$forceUpdate();
                    });
                }
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbStoreService().findTableListCascade({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        searchKeyword: _self.searchKeyword
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbStoreList = [..._self.tbStoreList, ...result.list];
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>
